<template>
  <div>
    <a-layout>
      <!-- music头部 -->
      <a-layout-header>
        <Header />
      </a-layout-header>
      <a-layout>
        <!-- music侧边栏 -->
        <a-layout-sider v-if="!hide">
          <Aside />
        </a-layout-sider>
        <a-layout-content>
          <!-- 路由入口 -->
          <!-- <keep-alive> -->
            <transition name="el-fade-in">
              <router-view></router-view>
            </transition>
          <!-- </keep-alive> -->
        </a-layout-content>
      </a-layout>
      <a-layout-footer v-if="!hide">
        <Footer />
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script>
import Header from '@/components/Header';
import Footer from '@/components/Footer';
import Aside from '@/components/Aside';
import { Layout } from 'ant-design-vue';
import { mapState } from 'vuex';

export default {
  name: 'Layout',

  components: {
    Header,
    Footer,
    Aside,
    ALayout: Layout,
    ALayoutHeader: Layout.Header,
    ALayoutContent: Layout.Content,
    ALayoutFooter: Layout.Footer,
    ALayoutSider: Layout.Sider
  },

  data() {
    return {
      
    };
  },
  
  computed: {
    ...mapState({
      hide: state => state.main.hide
    })
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>

</style>